<template>
  <div class="leave-approval-table-container">
    <span class="print-btn">
      <router-link style="" to="/main/renshi/jiaqiguanli"
        ><el-button icon="el-icon-back" type="primary">返回</el-button></router-link
      >
      <el-button type="info" icon="el-icon-printer" @click="printForm"
        >打印</el-button
      >
    </span>
    <h2 style="text-align: center">请假核决权限表</h2>
    <table class="approval-table">
      <thead>
        <tr>
          <th rowspan="2">职位</th>
          <th rowspan="2">期限</th>
          <th rowspan="2">请假人</th>
        </tr>
        <tr>
          <th>组长</th>
          <th>主管</th>
          <th>经理</th>
          <th>总监<br />事业部部长</th>
          <th>总经理</th>
          <th style="color: red">总裁/董事长</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="3">普工请假<br />组长以下人员</td>
          <td>1天以内</td>
          <td>○</td>
          <td>◎</td>
          <td>⊙</td>
          <td>●</td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>1-3天</td>
          <td>○</td>
          <td>◎</td>
          <td>⊙</td>
          <td>⊙</td>
          <td>●</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td style="color: red">3天以上</td>
          <td>○</td>
          <td>◎</td>
          <td>⊙</td>
          <td>⊙</td>
          <td>⊙</td>
          <td>●</td>
          <td></td>
        </tr>
        <tr>
          <td rowspan="3">组长级请假</td>
          <td style="color: red">1天以内</td>
          <td>○</td>
          <td></td>
          <td>◎</td>
          <td>●</td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>1-3天</td>
          <td>○</td>
          <td></td>
          <td>◎</td>
          <td>⊙</td>
          <td>●</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>3天以上</td>
          <td>○</td>
          <td></td>
          <td>◎</td>
          <td>⊙</td>
          <td>⊙</td>
          <td>●</td>
          <td></td>
        </tr>

        <tr>
          <td rowspan="3">职员请假<br />E级职员</td>
          <td style="color: red">1天以内</td>
          <td>○</td>
          <td></td>
          <td>◎</td>
          <td>●</td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>1-2天</td>
          <td>○</td>
          <td></td>
          <td>◎</td>
          <td>⊙</td>
          <td>●</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>2天以上</td>
          <td>○</td>
          <td></td>
          <td>◎</td>
          <td>⊙</td>
          <td>⊙</td>
          <td>●</td>
          <td></td>
        </tr>

        <tr>
          <td rowspan="3">职员请假<br />D级职员</td>
          <td style="color: red">1天以内</td>
          <td>○</td>
          <td></td>
          <td>◎</td>
          <td>●</td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>1-2天</td>
          <td>○</td>
          <td></td>
          <td>◎</td>
          <td>⊙</td>
          <td>●</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td style="color: red">2天以上</td>
          <td>○</td>
          <td></td>
          <td>◎</td>
          <td>⊙</td>
          <td>⊙</td>
          <td>●</td>
          <td></td>
        </tr>

        <tr>
          <td rowspan="2">职员请假<br />C级职员</td>
          <td style="color: red">3天以内</td>
          <td>○</td>
          <td></td>
          <td></td>
          <td></td>
          <td>◎</td>
          <td>●</td>
          <td></td>
        </tr>

        <tr>
          <td style="color: red">3天以上</td>
          <td>○</td>
          <td></td>
          <td></td>
          <td></td>
          <td>◎</td>
          <td>⊙</td>
          <td>●</td>
        </tr>
        <tr>
          <td>职员请假<br />B级职员</td>
          <td></td>
          <td>○</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td>●</td>
        </tr>
        <tr>
          <td>职员请产假</td>
          <td></td>
          <td>○</td>
          <td></td>
          <td>◎</td>
          <td>◎</td>
          <td>⊙</td>
          <td>⊙</td>
          <td>●</td>
        </tr>

        <tr>
          <td>
            <p>说明</p>
          </td>
          <td colspan="8">
            <p style="display: flex; justify-content: space-between">
              <span>〇—请假人申请</span> <span>◎—审核</span>
              <span>⊙—复核</span> <span>●—批准</span>
            </p>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="explanation"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    printForm() {
      window.print();
    },
  },
};
</script>

<style scoped>
.leave-approval-table-container {
  width: 210mm;
  min-height: 297mm;
  padding: 10mm;
  border: 1px solid #e0e0e0;
  background-color: #f9f9f9;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  page-break-after: always;
  text-align: left;
  line-height: 29.3326px;
  letter-spacing: 0.1039em;
  /* margin-top: 20px; */
  margin: 0 auto;
}

.approval-table {
  border-collapse: collapse;
  width: 100%;
}

.approval-table td,
.approval-table th {
  border: 1px solid #000;
  padding: 5px;
  text-align: center;
}
.print-btn {
  display: flex;
  justify-content: space-between;
}

@media print {
  .leave-approval-table-container {
    width: 100%;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
    border: 0;
  }

  .print-btn {
    display: none;
  }

  body {
    font-family: "宋体";
  }
}
</style>